<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp_lib/init.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>用户列表</title>
<jsp:include page="/WEB-INF/jsp/common/common.jsp" />
<jsp:include page="/WEB-INF/jsp_lib/extjs.jsp" />
<jsp:include page="/WEB-INF/jsp_lib/extjs/tree_checkbox.jsp" />

<script type="text/javascript">
	var dataStore;
	var treeStore;
	var treePanel;
	var editTreePanel;

	Ext.onReady(function() {

		//初始化 树
		treeStore = Ext.create('Ext.data.TreeStore', {
			proxy : {
				type : 'ajax',
				url : "${path}/cp/role/auth/auth_data_checkbox.htm",
				reader : {
					type : 'json',
				}
			}
		});
		treePanel = Ext.create('Ext.ux.tree.TriStateTreePanel', {
			store : treeStore,
			rootVisible : false,
			width : 400,
			height : 300
		});

		editTreePanel = Ext.create('Ext.ux.tree.TriStateTreePanel', {
			store : treeStore,
			rootVisible : false,
			width : 400,
			height : 300
		});

		//初始化列表数据
		dataStore = Ext.create('Ext.data.Store', {
			fields : [ 'name', 'auth_codes', 'kid' ],
			remoteSort : true,
			autoLoad : true,
			pageSize : 2,
			sorters : {
				property : 'created',
				direction : 'DESC'
			},
			proxy : {
				type : "ajax",
				url : "${path}/cp/role/role/list_data.htm",
				reader : {
					type : 'json',
					rootProperty : 'list',
					totalProperty : 'page.rowTotal'
				}
			},
			listeners : {
				'beforeload' : function(store, op, options) {
					var params = searchFormPanel.getForm().getValues();
					Ext.apply(dataStore.proxy.extraParams, params);
				}
			}
		}); //#dataStore

		var searchFormPanel = Ext.create('Ext.form.Panel', {
			frame : true,
			title : "搜索条件",
			style : {
				marginBottom : '5px'
			},
			buttonAlign : "center",
			collapsible : true,
			defaultType : "textfield",
			items : [ {
				xtype : "container",
				layout : "hbox",
				items : [ {
					xtype : "textfield",
					fieldLabel : "角色名",
					name : "srh_uname",
					id : "srh_uname"
				} ]
			} ],
			buttons : [ {
				text : "搜索",
				icon : jcapp.getIcon("magnifier.png"),
				handler : function() {
					dataStore.load({
					//params:params()
					});
					dataStore.sync();
				}
			}, {
				text : "重置",
				icon : jcapp.getIcon("arrow_refresh.png"),
				handler : function() {
					this.up('form').getForm().reset();
				}
			} ]
		}); //#searchFormPanel

		var listGridPanel = Ext.create('Ext.grid.Panel', {
			title : '角色列表 ',
			tbar : [ {
				text : '新增',
				xtype : 'button',
				icon : jcapp.getIcon("add.png"),
				handler : function() {
					myAdd();
				}
			} ],
			dockedItems : [ {
				xtype : 'pagingtoolbar',
				store : dataStore, // same store GridPanel is using
				dock : 'bottom',
				displayInfo : true
			} ],
			store : dataStore,
			columns : [ {
				text : '角色名 ',
				dataIndex : 'name',
				flex : 1
			}, {
				text : '权限 ',
				dataIndex : 'auth_codes',
				flex : 2
			}, {
				xtype : "actioncolumn",
				align : "center",
				text : '操作',
				flex : 1,
				items : [ {
					xtype : 'button',
					tooltip : '编辑',
					icon : jcapp.getIcon("application_form_edit.png"),
					handler : function(grid, rowIndex, colIndex) {
						var rec = grid.getStore().getAt(rowIndex);
						//alert("编辑 " + rec.get('kid'));
						myEdit(rec.get('kid'));
					}
				}, {
					xtype : 'button',
					tooltip : '删除',
					icon : jcapp.getIcon("cross.png"),
					handler : function(grid, rowIndex, colIndex) {
						var rec = grid.getStore().getAt(rowIndex);
						myDel(rec.get('kid'));
					}
				} ]

			} ]
		}); //#listGridPanel

		searchFormPanel.render(Ext.getBody());
		listGridPanel.render(Ext.getBody());

	});

	function myDel(kid) {
		Ext.Msg.confirm("提示:", "确定删除选定的记录?", function(e) {
			if (e == "yes") {
				Ext.Ajax.request({
					url : "${path}/cp/role/role/del.htm?kid=" + kid,
					success : function(response) {
						var json = Ext.util.JSON.decode(response.responseText);
						Ext.Msg.alert("提示", json.tip.msg);
						dataStore.load();
					},
					failure : function(response) {
						Ext.Msg.alert("提示", "操作失败!");
					}
				});
			}//#if
		});
	}//#myEdit
</script>

<jsp:include page="add.jsp" />
<jsp:include page="edit.jsp" />

</head>
<body>
	<div id="grid-example"></div>
</body>
</html>